<template>
    <div class="app-container home">
        <el-row :gutter="20">
            <el-col :sm="24" :lg="24">
                <blockquote class="text-warning" style="font-size: 14px">
                    领取阿里云通用云产品1888优惠券
                    <br />
                    <el-link href="https://www.aliyun.com/minisite/goods?userCode=brki8iof" type="primary"
                        target="_blank">https://www.aliyun.com/minisite/goods?userCode=brki8iof</el-link>
                    <br />
                    领取腾讯云通用云产品2860优惠券
                    <br />
                    <el-link
                        href="https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console"
                        type="primary"
                        target="_blank">https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console</el-link>
                    <br />
                    阿里云服务器折扣区
                    <el-link href="http://aly.ruoyi.vip" type="primary" target="_blank">>☛☛点我进入☚☚</el-link>
                    &nbsp;&nbsp;&nbsp; 腾讯云服务器秒杀区
                    <el-link href="http://txy.ruoyi.vip" type="primary" target="_blank">>☛☛点我进入☚☚</el-link><br />
                    <h4 class="text-danger">云产品通用红包，可叠加官网常规优惠使用。(仅限新用户)</h4>
                </blockquote>

                <hr />
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :sm="24" :lg="12" style="padding-left: 20px">
                <h2>享瘦后台管理</h2>
                <p>
                    一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
                </p>
                <p>
                    <b>当前版本:</b> <span>v{{ version }}</span>
                </p>
                <p>
                    <el-tag type="danger">&yen;免费开源</el-tag>
                </p>
            </el-col>

            <el-col :sm="24" :lg="12" style="padding-left: 50px">
                <el-row>
                    <el-col :span="12">
                        <h2>技术选型</h2>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <h4>后端技术</h4>
                        <ul>
                            <li>SpringBoot</li>
                            <li>Spring Security</li>
                            <li>JWT</li>
                            <li>MyBatis</li>
                            <li>Druid</li>
                            <li>Fastjson</li>
                            <li>...</li>
                        </ul>
                    </el-col>
                    <el-col :span="6">
                        <h4>前端技术</h4>
                        <ul>
                            <li>Vue</li>
                            <li>Vuex</li>
                            <li>Element-ui</li>
                            <li>Axios</li>
                            <li>Sass</li>
                            <li>Quill</li>
                            <li>...</li>
                        </ul>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>

    </div>
</template>

<script setup name="Index" lang="ts">
    import { ref } from 'vue';

    const version = ref('1.0.0');

    function goTarget(url : string) {
        window.open(url, '__blank');
    }
</script>

<style scoped lang="scss">
    .home {
        blockquote {
            padding: 10px 20px;
            margin: 0 0 20px;
            font-size: 17.5px;
            border-left: 5px solid #eee;
        }

        hr {
            margin-top: 20px;
            margin-bottom: 20px;
            border: 0;
            border-top: 1px solid #eee;
        }

        .col-item {
            margin-bottom: 20px;
        }

        ul {
            padding: 0;
            margin: 0;
        }

        font-family: 'open sans',
        'Helvetica Neue',
        Helvetica,
        Arial,
        sans-serif;
        font-size: 13px;
        color: #676a6c;
        overflow-x: hidden;

        ul {
            list-style-type: none;
        }

        h4 {
            margin-top: 0px;
        }

        h2 {
            margin-top: 10px;
            font-size: 26px;
            font-weight: 100;
        }

        p {
            margin-top: 10px;

            b {
                font-weight: 700;
            }
        }

        .update-log {
            ol {
                display: block;
                list-style-type: decimal;
                margin-block-start: 1em;
                margin-block-end: 1em;
                margin-inline-start: 0;
                margin-inline-end: 0;
                padding-inline-start: 40px;
            }
        }
    }
</style>
